<!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Custom tree formatting</title>
</head>
<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
    html, body {
        height: 100%;
        padding:0px;
        margin:0px;
        overflow: hidden;
    }
    .red .gantt_cell, .odd.red .gantt_cell,
    .red .gantt_task_cell, .odd.red .gantt_task_cell{
        background-color: #FDE0E0;
    }
    .green .gantt_cell, .odd.green .gantt_cell,
    .green .gantt_task_cell, .odd.green .gantt_task_cell {
        background-color: #BEE4BE;
    }
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%'></div>

<script type="text/javascript">
    gantt.config.grid_width = 380;
    gantt.config.add_column = false;
    gantt.templates.grid_row_class = function(item) {
        if (item.progress  == 0) return "red";
        if (item.progress >= 1) return "green";
    };
    gantt.templates.task_row_class = function(start_date, end_date, item) {
        if (item.progress  == 0) return "red";
        if (item.progress >= 1) return "green";
    };
    gantt.config.columns = [
        {name:"text", label:"Task name", tree:true, width:'*' },
        {name:"progress", label:"Progress", width:80, align: "center",
            template: function(item) {
                if (item.progress >= 1)
                    return "Complete";
                if (item.progress == 0)
                    return "Not started";
                return Math.round(item.progress*100) + "%";
            }
        },
        {name:"assigned", label:"Assigned to", align: "center", width:100,
            template: function(item) {
                if (!item.users) return "Nobody";
                return item.users.join(", ");
            }
        }
    ];
    gantt.init("gantt_here");
    gantt.parse(users_data);
</script>
</body>